<template>
  <div class="filterStyle">
    <div class="filter-btn">
      <el-button
        @click="closeFilter"
        :icon="showContent?'el-icon-arrow-up':'el-icon-arrow-down'"
        class="white-btn filterClose"
      >{{showContent?$t('fold'):$t('unfold')}}</el-button>
    </div>
    <el-collapse-transition>
      <div class="filterContent" v-if="showContent">
        <slot name="filterContent"></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script>
export default {
  name: 'searchFilter',
  data () {
    return {
      showContent: false
    }
  },
  methods: {
    closeFilter () {
      this.showContent = !this.showContent
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .filterStyle {
    margin-bottom: 10px;
    .filter-btn {
      display: flex; /*flex布局*/
      flex-direction: column; /*垂直排列*/
      align-items: flex-end; /*右对齐*/
    }
    .filterClose {
      color: #717171;
    }
  }
</style>
